<template>
  <div>
    <el-descriptions class="margin-top" :title="title" :column="column" border>
      <template v-for="(item, index) in descKey">
        <el-descriptions-item
          :label-class-name="'label ' + labelDirection"
          content-class-name="desc-content"
          :label="item.label"
        >
          <template>
            {{ formatText(descData, item) }}
          </template>
        </el-descriptions-item>
      </template>
    </el-descriptions>
    <el-image-viewer
      v-if="showViewer"
      :on-close="closeViewer"
      :url-list="srcList"
    />
  </div>
</template>

<script>
import ElImageViewer from "element-ui/packages/image/src/image-viewer";

export default {
  name: "CustomDescriptions",
  props: {
    descData: {
      type: Object,
      default: () => {},
    },
    descKey: {
      type: Array,
      default: () => [],
    },
    title: {
      type: String,
      default: () => "",
    },
    labelDirection: {
      type: String,
      default: () => "label-right",
    },
    column: {
      type: Number,
      default: () => 0,
    },
  },
  components: { ElImageViewer },
  data() {
    return {
      showViewer: false,
      srcList: [],
    };
  },
  methods: {
    // findLabelByValue
    formatText(row, item) {
      if (!row) {
        return;
      }
      if (item.format && item.format == 1) {
        return this.findLabelByValue(row[item.prop]);
      } else if (["压缩方式"].indexOf(item.label) >= 0) {
        return this.findLabelByValue(
          row[item.prop],
          this.$store.state.dicData.compressmModeList,
          "dictValue",
          "dictLabel"
        );
      } else if (["车辆基本类型"].indexOf(item.label) >= 0) {
        let val = row[item.prop];
        return this.findLabelByValue(
          val,
          this.$store.state.dicData.vehicleBaseTypeList,
          "dictValue",
          "dictLabel"
        );
      } else if (["自动驾驶等级"].indexOf(item.label) >= 0) {
        return this.findLabelByValue(
          row[item.prop],
          this.$store.state.dicData.vehicleAutoLevelList,
          "dictValue",
          "dictLabel"
        );
      } else if (["车辆用途"].indexOf(item.label) >= 0) {
        return this.findLabelByValue(
          row[item.prop],
          this.$store.state.dicData.vehicleUseTypeList,
          "dictValue",
          "dictLabel"
        );
      } else if (["车辆颜色"].indexOf(item.label) >= 0) {
        return this.findLabelByValue(
          row[item.prop],
          this.$store.state.dicData.vehicleColorList,
          "dictValue",
          "dictLabel"
        );
      } else if (["使用人"].indexOf(item.label) >= 0) {
        return this.findLabelByValue(
          row[item.prop],
          this.$store.state.dicData.userIdList,
          "dictValue",
          "dictLabel"
        );
      } else if (["主减速比"].indexOf(item.label) >= 0) {
        return this.findLabelByValue(
          row[item.prop],
          this.$store.state.dicData.jianSuList,
          "dictValue",
          "dictLabel"
        );
      } else if (["运营商"].indexOf(item.label) >= 0) {
        return this.findLabelByValue(
          row[item.prop],
          this.$store.state.dicData.yunYingList,
          "dictValue",
          "dictLabel"
        );
      } else if (["通讯模式"].indexOf(item.label) >= 0) {
        return this.findLabelByValue(
          row[item.prop],
          this.$store.state.dicData.tongXunList,
          "dictValue",
          "dictLabel"
        );
      } else if (["绑定状态"].indexOf(item.label) >= 0) {
        return this.findLabelByValue(
          row[item.prop],
          this.$store.state.dicData.bangDingList,
          "dictValue",
          "dictLabel"
        );
      } else if (["是否支持5G"].indexOf(item.label) >= 0) {
        return this.findLabelByValue(
          row[item.prop],
          this.$store.state.dicData.support5g,
          "dictValue",
          "dictLabel"
        );
      } else if (["是否支持4G"].indexOf(item.label) >= 0) {
        return this.findLabelByValue(
          row[item.prop],
          this.$store.state.dicData.support5g,
          "dictValue",
          "dictLabel"
        );
      } else if (["是否支持DSRC"].indexOf(item.label) >= 0) {
        return this.findLabelByValue(
          row[item.prop],
          this.$store.state.dicData.support5g,
          "dictValue",
          "dictLabel"
        );
      } else if (["是否支持PC5"].indexOf(item.label) >= 0) {
        return this.findLabelByValue(
          row[item.prop],
          this.$store.state.dicData.support5g,
          "dictValue",
          "dictLabel"
        );
      } else if (["是否支持rtk"].indexOf(item.label) >= 0) {
        return this.findLabelByValue(
          row[item.prop],
          this.$store.state.dicData.support5g,
          "dictValue",
          "dictLabel"
        );
      } else if (["是否支持wifi"].indexOf(item.label) >= 0) {
        return this.findLabelByValue(
          row[item.prop],
          this.$store.state.dicData.support5g,
          "dictValue",
          "dictLabel"
        );
      } else if (["是否支持蓝牙"].indexOf(item.label) >= 0) {
        return this.findLabelByValue(
          row[item.prop],
          this.$store.state.dicData.support5g,
          "dictValue",
          "dictLabel"
        );
      } else if (["是否激活"].indexOf(item.label) >= 0) {
        return this.findLabelByValue(
          row[item.prop],
          this.$store.state.dicData.jiHuoList,
          "dictValue",
          "dictLabel"
        );
      } else if (["是否有效"].indexOf(item.label) >= 0) {
        return this.findLabelByValue(
          row[item.prop],
          this.$store.state.dicData.youXiaoList,
          "dictValue",
          "dictLabel"
        );
      } else if (["杆件类型"].indexOf(item.label) >= 0) {
        return this.findLabelByValue(
          row[item.prop],
          this.$store.state.dicData.gjlxList,
          "dictValue",
          "dictLabel"
        );
      } else if (["杆件型号"].indexOf(item.label) >= 0) {
        return this.findLabelByValue(
          row[item.prop],
          this.$store.state.dicData.gjxhList,
          "dictValue",
          "dictLabel"
        );
      } else if (["供应商"].indexOf(item.label) >= 0) {
        return this.findLabelByValue(
          row[item.prop],
          this.$store.state.dicData.gysList,
          "dictValue",
          "dictLabel"
        );
      } else if (["亮度"].indexOf(item.label) >= 0) {
        return this.findLabelByValue(
          row[item.prop],
          this.$store.state.dicData.ldList,
          "dictValue",
          "dictLabel"
        );
      } else if (["型号"].indexOf(item.label) >= 0) {
        return this.findLabelByValue(
          row[item.prop],
          this.$store.state.dicData.jspXhList,
          "dictValue",
          "dictLabel"
        );
      } else if (["使用环境"].indexOf(item.label) >= 0) {
        return this.findLabelByValue(
          row[item.prop],
          this.$store.state.dicData.sshjList,
          "dictValue",
          "dictLabel"
        );
      } else if (["是否支持有线网络控制"].indexOf(item.label) >= 0) {
        return this.findLabelByValue(
          row[item.prop],
          this.$store.state.dicData.ssfzcyxwlkzList,
          "dictValue",
          "dictLabel"
        );
      } else if (["雷达型号"].indexOf(item.label) >= 0) {
        return this.findLabelByValue(
          row[item.prop],
          this.$store.state.dicData.jgldxhList,
          "dictValue",
          "dictLabel"
        );
      } else if (["安全等级"].indexOf(item.label) >= 0) {
        return this.findLabelByValue(
          row[item.prop],
          this.$store.state.dicData.aqdjList,
          "dictValue",
          "dictLabel"
        );
      } else if (["防护等级"].indexOf(item.label) >= 0) {
        return this.findLabelByValue(
          row[item.prop],
          this.$store.state.dicData.fhdjList,
          "dictValue",
          "dictLabel"
        );
      } else if (["信号机型号"].indexOf(item.label) >= 0) {
        return this.findLabelByValue(
          row[item.prop],
          this.$store.state.dicData.xhjxhList,
          "dictValue",
          "dictLabel"
        );
      } else if (["发动机型号"].indexOf(item.label) >= 0) {
        return this.findLabelByValue(
          row[item.prop],
          this.$store.state.dicData.engineGrade,
          "dictValue",
          "dictLabel"
        );
      } else if (["发动机排量"].indexOf(item.label) >= 0) {
        return this.findLabelByValue(
          row[item.prop],
          this.$store.state.dicData.emissionStage,
          "dictValue",
          "dictLabel"
        );
      } else if (["定位精度"].indexOf(item.label) >= 0) {
        return this.findLabelByValue(
          row[item.prop],
          this.$store.state.dicData.gnssStatus,
          "dictValue",
          "dictLabel"
        );
      } else if (["通信模式"].indexOf(item.label) >= 0) {
        return this.findLabelByValue(
          row[item.prop],
          this.$store.state.dicData.communicateMode,
          "dictValue",
          "dictLabel"
        );
      } else if (["5G"].indexOf(item.label) >= 0) {
        return this.findLabelByValue(
          row[item.prop],
          this.$store.state.dicData.support5g,
          "dictValue",
          "dictLabel"
        );
      } else if (["DSRC"].indexOf(item.label) >= 0) {
        return this.findLabelByValue(
          row[item.prop],
          this.$store.state.dicData.support5g,
          "dictValue",
          "dictLabel"
        );
      } else if (["LTE-V"].indexOf(item.label) >= 0) {
        return this.findLabelByValue(
          row[item.prop],
          this.$store.state.dicData.support5g,
          "dictValue",
          "dictLabel"
        );
      } else if (["是否支持RTK"].indexOf(item.label) >= 0) {
        return this.findLabelByValue(
          row[item.prop],
          this.$store.state.dicData.support5g,
          "dictValue",
          "dictLabel"
        );
      } else if (["WIFI"].indexOf(item.label) >= 0) {
        return this.findLabelByValue(
          row[item.prop],
          this.$store.state.dicData.support5g,
          "dictValue",
          "dictLabel"
        );
      } else if (["蓝牙"].indexOf(item.label) >= 0) {
        return this.findLabelByValue(
          row[item.prop],
          this.$store.state.dicData.support5g,
          "dictValue",
          "dictLabel"
        );
      } 
      else if (["路侧点类型"].indexOf(item.label) >= 0) {
        return this.findLabelByValue(
          row[item.prop],
          this.$store.state.dicData.rspType,
          "dictValue",
          "dictLabel"
        );
      }
      else if (["路侧点等级"].indexOf(item.label) >= 0) {
        return this.findLabelByValue(
          row[item.prop],
          this.$store.state.dicData.rspLevel,
          "dictValue",
          "dictLabel"
        );
      }
      else if (["支持结构化数据"].indexOf(item.label) >= 0) {
        return this.findLabelByValue(
          row[item.prop],
          this.$store.state.dicData.isObjectsOutput,
          "dictValue",
          "dictLabel"
        );
      }
      else if (["时间同步方式"].indexOf(item.label) >= 0) {
        return this.findLabelByValue(
          row[item.prop],
          this.$store.state.dicData.timeSyncMethod,
          "dictValue",
          "dictLabel"
        );
      }
      else if (["支持输出时间戳"].indexOf(item.label) >= 0) {
        return this.findLabelByValue(
          row[item.prop],
          this.$store.state.dicData.supportTimestamp,
          "dictValue",
          "dictLabel"
        );
      }
      else if (["支持协议"].indexOf(item.label) >= 0) {
        return this.findLabelByValue(
          row[item.prop],
          this.$store.state.dicData.supportAgreement,
          "dictValue",
          "dictLabel"
        );
      }
      else if (["雷达类型"].indexOf(item.label) >= 0) {
        return this.findLabelByValue(
          row[item.prop],
          this.$store.state.dicData.lidarType,
          "dictValue",
          "dictLabel"
        );
      }
      else {
        return row[item.prop];
      }
      // let arr = ["比例", "合格率", "及时率"];
      // if(arr.indexOf(item.label) >= 0) {
      //   return row[item.prop]+"%";
      // }else {
      //   return row[item.prop];
      // }
    },
    //根据数字获取数组里的值
    findLabelByValue(value, arr, valueKey, labelKey) {
      // if (arr == "" || !arr) {
      //   arr = this.$store.state.dicData.placeList;
      // }
      // if (valueKey == "" || !valueKey) {
      //   valueKey = "placeCode";
      // }
      // if (labelKey == "" || !labelKey) {
      //   labelKey = "areaName";
      // }
      let label = "";
      arr.find((k) => {
        if (k[valueKey] == value) {
          label = k[labelKey];
        }
      });
      if (label) {
        return label;
      } else {
        return value;
      }
    },
    onPreview(url) {
      this.srcList = [];
      this.srcList.push(url);
      this.showViewer = true;
    },
    closeViewer() {
      this.showViewer = false;
    },
  },
};
</script>

<style scoped>
::v-deep .label {
  background: #f4f4fb;
  border-color: #eaeaf7 !important;
  color: #b1b1b2;
  width: 200px;
}

::v-deep .label.label-left {
  text-align: left !important;
  background: #fff;
}

::v-deep .label.label-right {
  text-align: right !important;
}

::v-deep .desc-content {
  min-width: 150px;
}
</style>
